<template>
  <div class="header-wrapper" :class="dataList.length == 0 ? 'nodata-height' : ''">
    <div class="title">
      <img
        src="../../../../../public/img/back.png"
        alt=""
        class="back-img"
        @click="$router.go(-1)"
      />新增/编辑配置
    </div>
    <div class="operate-container">
      <el-button
        icon="el-icon-delete"
        plain
        @click="handleDelete"
        :disabled="multipleSelection.length == 0"
        >批量删除</el-button
      >

      <el-button icon="CirclePlus" @click="openInspectionItems()">新增检查项</el-button>
    </div>

    <div class="noData-wrapper" v-if="dataList.length == 0">
      <img src="../../../../../public/img/frame@2x.png" alt="" class="img" />
      <p class="tip">暂无信息，请新增检查项</p>
    </div>
  </div>
  <div class="content-warp" v-if="dataList.length > 0">
    <div class="table-container">
      <el-table
        height="200px"
        v-loading="loading"
        :data="dataList"
        :show-header="false"
        @row-click="handleRowClick"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" type="checkCategoryDict" width="150px">
          <template #default="scoped">
            <div
              class="tag"
              :class="scoped.row.checkCategoryDict == '功能验证' ? 'green' : 'purple'"
            >
              {{ scoped.row.checkCategoryDict }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="名称" show-overflow-tooltip prop="inspectionItemName" />
        <el-table-column label="操作" width="160" fixed="right" align="right">
          <template #default="scoped">
            <el-button link type="primary" @click="upgrade(scoped.row.id)">升版</el-button>
            <el-button
              icon="el-icon-edit"
              link
              type="primary"
              @click="openInspectionItems(scoped.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="report-info-wrapper" v-if="selectedRow">
      <div class="report-title" v-if="selectedRow.pictureId">图片示例</div>
      <div class="imgsList" v-if="selectedRow.pictureId">
        <dc-upload-img v-model="selectedRow.pictureId" disabled />
      </div>
      <div class="report-title">检查项</div>
      <el-table v-loading="loading" :data="selectedRow.sipEntryItems" class="select-table">
        <el-table-column label="序号" type="index" width="60px" align="center">
          <template #default="scoped">
            <span>{{ scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="检查项" prop="inspectionItem" />
        <el-table-column label="检测方法&标准" prop="method" width="180px" />
      </el-table>

      <div class="report-title" v-if="selectedRow.remark">备注信息</div>
      <div class="report-info" v-if="selectedRow.remark">
        {{ selectedRow.remark }}
      </div>
    </div>
  </div>
  <!-- 检查项 -->
  <InspectionItemsDialog ref="inspectionItemsDialogRef" @success="addInspectionItems" />
</template>
<script setup name="Productiongroup">
import InspectionItemsDialog from './inspectionItemsDialog.vue';
import { onMounted, getCurrentInstance } from 'vue';
import Api from '@/api/index';
import { useRouter } from 'vue-router';
const { proxy } = getCurrentInstance();
const { currentRoute } = useRouter();
const route = currentRoute.value;
const inspectionItemsDialogRef = ref(null);
const data = reactive({
  queryParams: {},
  dataList: [],
  loading: true,
  title: '',
  selectedRow: null, // 添加这一行
  multipleSelection: [],
  orderId: null,
});

const { queryParams, dataList, loading, selectedRow, multipleSelection, orderId } = toRefs(data);

// 检查项添加回调
const addInspectionItems = () => {
  getData();
};

/** 查询参数列表 */
const getData = async id => {
  loading.value = true;
  let dataparam = Object.assign(queryParams.value, { id: orderId.value });
  const res = await Api.qms.sn.sipOrderDetail(dataparam);
  const { code, data } = res.data;
  if (code === 200) {
    dataList.value = data.sipEntryList.filter(item => item) || [];
    if (data.sipEntryList.length > 0) {
      selectedRow.value = dataList.value[0];
    }
  }
  loading.value = false;
};

onMounted(() => {
  if (route.query.id) {
    orderId.value = route.query.id;
    getData();
  }
});

// 升版
const upgrade = id => {
  Api.qms.sn
    .sipOrderUpgrade({
      id,
    })
    .then(e => {
      let { code, data } = e.data;
      console.log(data);
      openInspectionItems(data);
    })
    .catch(e => {});
};

// 多选
const handleSelectionChange = val => {
  data.multipleSelection = Array.from(val, ({ id }) => id);
  console.log(data.multipleSelection[0]);
};

/** 删除按钮操作 */
const handleDelete = () => {
  proxy
    .$confirm('是否确认删除数据吗？')
    .then(async () => {
      return Api.qms.sn.sipEntryRemove(data.multipleSelection.join(','));
    })
    .then(() => {
      proxy.$message.success('删除成功');
      getData();
    })
    .catch(() => {});
};

// 添加修改检查项目
const openInspectionItems = row => {
  console.log(row);
  let data = {
    ...row,
    type: row ? '编辑' : '新增',
    orderId: orderId.value,
  };
  inspectionItemsDialogRef.value.openDialog(data);
};

// 行点击事件处理
const handleRowClick = row => {
  selectedRow.value = row;
};

// 行样式类处理
const tableRowClassName = ({ row }) => {
  console.log(row);
  if (selectedRow.value && selectedRow.value === row) {
    console.log('进来啊');
    return 'selected-row';
  }
  return '';
};
</script>

<style scoped lang="scss">
:deep(.selected-row) {
  background: rgba(250, 111, 12, 0.05);
  box-shadow: inset 0px 0px 0px 0px #e5e5e5;
}

.imgsList :deep(.component-upload-image) {
  .el-upload--picture-card {
    width: 160px; /* 设置上传按钮的宽度 */
    height: 120px; /* 设置上传按钮的高度 */
    line-height: 120px; /* 设置上传按钮的行高 */
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 160px; /* 设置图片项的宽度 */
    height: 120px; /* 设置图片项的高度 */
  }

  .el-upload--picture-card {
    display: none;
  }
}

.operate-container {
  margin-bottom: 20px;
}
.content-warp {
  height: calc(100% - 190px);
  padding-top: 0px;
  display: flex;
  position: relative;
  border-radius: 0px 0px 8px 8px;

  .table-container {
    width: 60%;
    margin-bottom: 0px;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
  }
  .tag {
    display: flex;
    padding: 4px 12px;
    box-sizing: border-box;
    height: 22px;
    align-items: center;
    background: #168be8;
    border-radius: 4px 4px 4px 4px;
    font-size: 14px;
    color: #ffffff;
    justify-content: center;
    align-items: center;
  }
  .green {
    background-color: #11afa7;
  }
  .purple {
    background-color: #994fe1;
  }
  .report-info-wrapper {
    right: 10px;
    position: absolute;
    width: calc(40% - 10px);
    border-radius: 4px;
    border: 1px solid #e9e9e9;
    display: flex;
    background: #fff;
    flex-direction: column;
    padding: 24px;
    box-sizing: border-box;
    overflow-y: scroll;
    .imgsList {
      display: flex;
      align-items: center;
      margin: 10px 0px;
      flex-wrap: wrap;
      .img-item {
        width: 30%;
        height: 100px;
        margin-right: 5%;
        margin-bottom: 10px;
        &:nth-of-type(3n) {
          margin-right: 0px !important;
        }
      }
    }
    .report-title {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
    }
    .report-info {
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #dadbe0;
      padding: 8px 16px;
      box-sizing: border-box;
      margin: 16px 0px 20px;
      background-color: #f6f8fa;
      color: #848488;
      font-size: 14px;
      .report-info-item {
        display: flex;
        align-items: center;
        line-height: 24px;
      }
    }
    .select-table {
      margin: 16px 0px 24px;
    }
  }
}
.form-itme-width {
  width: 20%;
}

:deep(.el-table__inner-wrapper:before) {
  display: none;
}

.nodata-height {
  height: calc(100% - 20px) !important;
}

.header-wrapper {
  display: flex;
  padding: 0px 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 8px 8px 0x 0px;
  width: 100%;
  flex-direction: column;
  .title {
    display: flex;
    height: 58px;
    align-items: center;
    border-bottom: 1px solid #dadbe0;
    margin-bottom: 20px;
    .back-img {
      width: 22px;
      height: 22px;
      margin-right: 8px;
      cursor: pointer;
    }
  }
  .search-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
  }
  .noData-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img {
      width: 320px;
      height: 320px;
    }
    .tip {
      font-size: 24px;
      color: #848488;
    }
  }
  :deep(.el-descriptions__label) {
    display: inline-block;
    width: 90px;
    text-align: right;
  }

  :deep(.el-descriptions__cell) {
    margin-bottom: 18px !important;
  }
  .search-result {
    padding: 10px 0px 0px;
    box-sizing: border-box;
    border: 1px dashed #606266;
  }
}
.form-itme-width {
  width: 22%;
}
</style>
